<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>
    第五课
  </title>
</head>
<body>
DOM: 核心DOM，HTMLDOM，XHTMLDOM

1.一些常用的事件 ———————————— >
  鼠标事件：
    onclick
    ondblclick
    onmousedown (右键也有)
    onmouseup
    onmousemove
    onmouseover
    onmouseout ...

    onkeydown: 按键被按下，按键的值未被目标接收到
    onkeypress: 按键被按下，按键的值已经被目标接收到
    onkeyup: 按键松开
    onfocus: 获得焦点
    onblur：失去焦点
    onchange：表单值发生改变

    onload：当页面全部加载完成 cc/js/img
    onerro:


2.HTML DOM
  1) 核心DOM： 遍历DOM树，添加新节点，删除节点，修改节点
  2) HTML DOM: 以一种简便的方法访问DOM树
  3) XML DOM: 专用于操作XML文档

比较项目             核心DOM                 HTML DOM
对象：          Document,Node,             Image,Table, Anchor(a)
                ElementNode,TextNode      Form, Input
                AttributeNode,             Select ...
               commentNode,Nodelist       每个元素都是对象

创建新元素：    document.createElement('img')    new Image()
元素添加属性：  e.setAttribute('','')            image.src = '';
               e.setAttributeNode(attr);        image.id = '';
                                                image.title = '';
                                                image.width = 0; // 是number类型的
                                                image.style.display = '';
                                                image.className = '';

适用场合：      适合创建，查找，删除，替换节点     适合读取，修改元素属性





3.Cookie技术

<a href="01.html" class="link" id="my" target="_blank" title="我的类型" cate="010" data-id="1231">一个超链接</a>
<script>
  var self = document.querySelector('.link');
  /* @example 核心DOM*/
  console.log(self.getAttribute('cate'));
  /* @example HTML DOM*/
  console.log(self.href); // 会获取完整的地址
  console.log(self.id);
  console.log(self.className);
  console.log(self.cate);  // undefined

</script>
</body>
</html>